<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/userlist.css">
		<script src="${pageContext.request.contextPath}/js/userlist.js"></script>
		<script>
			var flag = '${flag}'
			if (flag == '1') {
				alert('重置成功');
			} else if (flag == '2') {
				alert('重置失败');
			} else if (flag == '3') {
				alert('更改成功');
			} else if (flag == '4') {
				alert('更改失败');
			}
		</script>
		<div class="userlist">
			<h1>用户列表</h1>
			<div class="search">
				<form action="" method="post">
					<input type="text" class="text" placeholder="${query_tip}"><input type="button" value="搜索"
						class="button">
				</form>
			</div>
			<table>
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>用户名</th>
						<th>邮箱</th>
						<th>管理</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${users}" var="user" varStatus="stat">
						<tr>
							<td>${stat.index+1+page}</td>
							<td>${user.name}</td>
							<td>${user.age}</td>
							<td>${user.sex==0?'男':'女'}</td>
							<td>${user.username}</td>
							<td>${user.email}</td>
							<td>
								<input type="button" value="重置"
									onclick="javascript:window.location='change?action=reset&id=${user.id}'">
								<input type="button" value="${user.state==0?'激活':'冻结'}"
									onclick="javascript:window.location='change?action=delete&id=${user.id}&state=${user.state}'">
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<c:if test="${query_tip=='请输入用户名...'}">
				<div class="page">
					<input type="button" value="首页" class="start_page">
					<input type="button" value="上一页" class="prev_page">
					<input type="button" value="下一页" class="next_page">
					<input type="button" value="尾页" class="end_page">
				</div>
				<script>
					//页面跳转
					var page = parseInt('${page}');
					var total = parseInt('${totalPage}');
					console.log(page);
					var up = $('.userlist .page .prev_page');
					var down = $('.userlist .page .next_page');
					var start = $('.userlist .page .start_page');
					var end = $('.userlist .page .end_page');
					up.click(function () {
						page = page - 8;
						if (page < 0) {
							page = 0;
						} else {
							window.location.href = 'userlist?page=' + page;
						}
					});

					down.click(function () {
						page = page + 8;
						if (page > total * 8 - 8) {
							page = total * 8 - 8;
						} else {
							window.location.href = 'userlist?page=' + page;
						}
					});

					start.click(function () {
						page = 0;
						window.location.href = 'userlist?page=' + page;
					})

					end.click(function () {
						page = page = total * 8 - 8;
						window.location.href = 'userlist?page=' + page;
					});
				</script>
			</c:if>

		</div>